<template>
  <Page :title="title">
    <div class="echartSearch">
      <el-select v-model="searchTitle" placeholder="筛选" style="width: 188px">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.title"
          :value="item.id"
        />
      </el-select>
      <div class="rightTime">
        <Tabs default-value="trends">
          <TabsList>
            <template v-for="tab in chartTabs" :key="tab.label">
              <TabsTrigger :value="tab.value" @click="tabTypeMethod(tab.value)">
                {{ tab.label }}
              </TabsTrigger>
            </template>
          </TabsList>
        </Tabs>
        <div class="dateStyle">
          <el-date-picker
            v-model="dateValue"
            v-if="tabType == 'trends'"
            type="date"
          />
          <el-date-picker
            v-model="dateValue"
            v-if="tabType == 'visits'"
            type="month"
          />
          <el-date-picker
            :clearable="false"
            v-model="dateValue"
            type="daterange"
            unlink-panels
            v-if="tabType == 'visitM'"
            range-separator="-"
          />
        </div>
      </div>
    </div>
    <EchartsUI id="charTrend" ref="charTrendRef"></EchartsUI>
  </Page>
</template>

<script setup>
import { Page } from '@vben/common-ui';
import { ElSelect, ElOption, ElDatePicker } from 'element-plus';
// import { Tabs, TabsContent, TabsList, TabsTrigger } from 'shadcn-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import dayjs from 'dayjs';
import list from './list.js';
import { h, ref, onMounted } from 'vue';
const charTrendRef = ref(null);
const searchTitle = ref('');
const tabType = ref('trends');
const { renderEcharts } = useEcharts(charTrendRef);
const title = ref('数据趋势');
const options = ref('');
const dateValue = ref('');
const chartTabs = [
  {
    label: '分时',
    value: 'trends',
  },
  {
    label: '分日',
    value: 'visits',
  },
  {
    label: '分月',
    value: 'visitM',
  },
];
onMounted(() => {
  options.value = list;
  dateValue.value = dayjs();
  console.log(useEcharts(charTrendRef));
  init();
});
const tabTypeMethod = (value) => {
  tabType.value = value;
};
const init = () => {
  renderEcharts({
    tooltip: {},
    legend: {
      bottom: 0,
      left: 'center',
      icon: 'rect', // 设置图例图标为矩形
      itemWidth: 10, // 图标宽度
      itemHeight: 5, // 图标高度
      itemGap: 20, // 图标间距
    },
    grid: {
      bottom: 0,
      containLabel: true,
      left: '1%',
      right: '1%',
      top: '2%',
      bottom: '10%',
    },

    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        name: '2025-03-21',
        smooth: true,
      },
      {
        data: [8201, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        name: '2025-03-22',
        smooth: true,
      },
    ],
  });
};
</script>
<style lang="scss" scoped>
.echartSearch {
  height: 70px;
  margin: -20px 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .rightTime {
    display: flex;
    align-items: center;
  }
  .dateStyle {
    width: 190px;
    margin-left: 20px;
    :deep(.el-input) {
      width: 100%;
      background: #f7f8fa !important;
    }
    :deep(.el-input__wrapper) {
      width: 100%;
      background: #f7f8fa !important;
    }

    :deep(.el-date-editor) {
      width: 100%;
      background: #f7f8fa !important;
    }
  }
}
</style>
